<!--
 * @Description: 节点信息
 * @Author: wind-lc
 * @version: 1.0
 * @Date: 2021-12-16 16:33:07
 * @LastEditTime: 2021-12-21 17:45:05
 * @FilePath: \cscec-pms-admin\src\views\construction\constructionSchedule\components\NodeInfo.vue
-->
<template>
  <div
    v-show="visible"
    class="node-info-mask"
    @click="handleClose"
  >
    <div class="node-info-container">
      <p>{{ title }}</p>
      <a-table
        row-key="name"
        :columns="columns"
        :data-source="data"
        bordered
        :loading="ready"
        :pagination="false"
      />
    </div>
  </div>
</template>
<script>
export default {
  name: 'NodeInfo',
  props: {
    // 隐藏显示
    visible: {
      type: Boolean,
      require: true
    },
    // 节点信息
    data: {
      type: Array,
      require: true
    },
    // 节点信息
    title: {
      type: String,
      require: true
    },
    ready: {
      type: Boolean,
      require: true
    }
  },
  components: {},
  data() {
    return {}
  },
  computed: {
    //表头
    columns() {
      return [
        {
          title: '序号',
          width: 80,
          align: 'center',
          customRender: (text, record, index) => {
            return index + 1
          }
        },
        {
          title: '节点类型',
          dataIndex: 'label',
          align: 'center'
        },
        {
          title: this.title,
          dataIndex: 'value',
          align: 'center',
          customRender: (text) => {
            return text + '%'
          }
        }
      ]
    }
  },
  methods: {
    /**
     * @description: 处理关闭
     * @param {void}
     * @return {void}
     */
    handleClose(e) {
      if (e.currentTarget === e.target) {
        this.$emit('update:visible', false)
      }
    }
  }
}
</script>
<style lang="less" scoped>
.node-info-mask {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 999;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.45);
  display: flex;
  justify-content: center;
  align-items: center;
}
.node-info-container {
  background-color: #fff;
  background-clip: padding-box;
  border: 0;
  border-radius: 4px;
  box-shadow: 0 4px 12px rgb(0 0 0 / 15%);
  width: 700px;
  min-height: 270px;
  padding: 24px;
}
</style>
